<section id="hireEdit" @click="hideExpense">
  <div class="hi-edit-title">{{title}}</div>
  <div class="he-ptb-20 pl-24 bg-f7f7f7 color-blue"
    v-if="(withdraw.auditState == 'FBP' && withdraw.fbpReason) || (withdraw.auditState == 'FCP' && withdraw.fcpReason)">
    <span v-if="withdraw.auditState == 'FBP'">{{withdraw.fbpReason}}</span>
    <span v-if="withdraw.auditState == 'FCP'">{{withdraw.fcpReason}}</span>
  </div>
  <section class="plr-24">
    <section class="he-basic-mes-container">
      <h3 class="he-title">基本信息</h3>
      <div class="row line-height-34">
        <div class="col-xs-2 hr-basic-width">退租时间：</div>
        <!--财务审核不通过不能改退租时间-->
        <div class="col-xs-3  pr-0" v-if="withdraw.auditState !== 'FCP'">
          <!-- <input readonly placeholder="退租时间" type="text" id="tzDate" class="inp inp-w form-control he-hire-time cursor"> -->
          <web-calendar type="primary" v-model="tzDate" @on-change="getWithdrawDate"></web-calendar>
        </div>
        <div class="col-xs-4" v-if="withdraw.auditState == 'FCP'">
          {{withdraw.withdrawDate | formatDate}}
        </div>
      </div>
      <div class="row line-height-34">
        <div class="col-xs-2 hr-basic-width">退租单号：</div>
        <div class="col-xs-9">{{withdraw.wCode}}</div>
      </div>
      <div class="row line-height-34">
        <div class="col-xs-2 hr-basic-width">状态：</div>
        <div class="col-xs-9 color-orange">{{withdraw.auditState | auditState}}</div>
      </div>
      <div class="row line-height-34">
        <div class="col-xs-2 hr-basic-width">合同编号：</div>
        <div class="col-xs-4"><a href="javascript:;" @click="goToContractDeatail">{{contract.cCode || '--'}}</a>
        </div>
        <div class="col-xs-2 hr-basic-width">管理编号：</div>
        <div class="col-xs-3"><a href="javascript:;" @click="goToContractDeatail">{{contract.mCode}}</a></div>
      </div>
      <div class="row line-height-34">
        <div class="col-xs-2 hr-basic-width">合同名称：</div>
        <div class="col-xs-9">
          {{contract.contractName ? contract.contractName : '--'}}
        </div>
      </div>
      <div class="row line-height-34">
        <div class="col-xs-2 hr-basic-width">租户名称：</div>
        <div class="col-xs-9">{{withdraw.zlfName}}</div>
      </div>
    </section>
    <!-- 出租资源 -->
    <div class="rent-resource mb-20">
      <h4 class="font-14">出租资源</h3>
        <!-- 单元 -->
        <div v-if="building.length">
          <div class="clearfix line-height-34">
            <div class="pull-left">单元<span>({{Number(totalArea).toFixed(2)}}m²)</span></div>
            <div class="pull-right cursor" @click="checkDetailMes('unit')">
              <span style="color:#337ab7" v-if="!unitOpenFlag">展开详情</span>
              <span style="color:#337ab7" v-if="unitOpenFlag">收起详情</span>
              <img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!unitOpenFlag">
              <img class="bill-open-image" src="assets/images/down.png" alt="" v-if="unitOpenFlag">
            </div>
          </div>
          <div class="unit-table" v-if="unitOpenFlag">
            <div class="tb-title dy-flex border-b gradient-color">
              <div class="dy-fx-2">项目</div>
              <div class="dy-fx-2">楼栋</div>
              <div class="dy-fx-1">楼层</div>
              <div class="dy-fx-4">单元</div>
            </div>
            <div class="tb-content">
              <ul class="dy-flex project-cr">
                <li class="dy-fx-2 project">{{contract.projectName}}</li>
                <li class="dy-fx-7">
                  <!-- 楼栋 -->
                  <ul class="dy-flex building-cr" v-for="(item,index) in building">
                    <li class="dy-fx-2 building">{{item.buildingName}}</li>
                    <li class="dy-fx-5">
                      <!-- 楼层 -->
                      <ul class="dy-flex floor-cr" v-for="(item1,index1) in item.floor">
                        <li class="dy-fx-1 floor">{{item1.floorNum}}</li>
                        <li class="dy-fx-4 unit">
                          <!-- 单元 -->
                          <b v-for="(item2,index2) in item1.unit">{{item2}}<i
                              v-if="index2 + 1 !== item1.unit.length">、</i></b>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div v-if="wp.length">
          <div class="clearfix line-height-34">
            <div class="pull-left">工位<span>({{wpTotalNum}}个)</span></div>
            <div class="pull-right cursor" @click="checkDetailMes('wp')">
              <span style="color:#337ab7" v-if="!wpOpenFlag">展开详情</span>
              <span style="color:#337ab7" v-if="wpOpenFlag">收起详情</span>
              <img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!wpOpenFlag">
              <img class="bill-open-image" src="assets/images/down.png" alt="" v-if="wpOpenFlag">
            </div>
          </div>
          <div class="position-table border" v-if="wpOpenFlag">
            <div class="tb-title dy-flex border-b gradient-color">
              <div class="dy-fx-3">项目</div>
              <div class="dy-fx-3">楼栋</div>
              <div class="dy-fx-1">楼层</div>
              <div class="dy-fx-1">单元</div>
              <div class="dy-fx-1">工位数</div>
              <div class="position-item">工位</div>
            </div>
            <ul class="tb-content">
              <li class="content-item dy-flex" v-for="(item,index) in wp" :buildingId="item.buildingId"
                :floorId="item.floorId" :unitId="item.unitId">
                <div class="dy-fx-3">{{contract.projectName}}</div>
                <div class="dy-fx-3">{{item.buildingName}}</div>
                <div class="dy-fx-1">{{item.floorNum}}</div>
                <div class="dy-fx-1">{{item.unitName}}</div>
                <div class="dy-fx-1">{{item.num}}</div>
                <div class="position-item">
                  <span class="position">
                    <b v-for="(item1,index1) in item.positions">{{item1.positionName}}<i
                        v-if="index1 + 1 !== item.positions.length">、</i></b>
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div v-if="st.length">
          <div class="clearfix line-height-34">
            <div class="pull-left">车位<span>({{stTotalNum}}个)</span></div>
            <div class="pull-right cursor" @click="checkDetailMes('st')">
              <span style="color:#337ab7" v-if="!stOpenFlag">展开详情</span>
              <span style="color:#337ab7" v-if="stOpenFlag">收起详情</span>
              <img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!stOpenFlag">
              <img class="bill-open-image" src="assets/images/down.png" alt="" v-if="stOpenFlag">
            </div>
          </div>
          <div class="position-table border" v-if="stOpenFlag">
            <div class="tb-title dy-flex border-b gradient-color">
              <div class="dy-fx-3">项目</div>
              <div class="dy-fx-3">楼栋</div>
              <div class="dy-fx-1">楼层</div>
              <div class="dy-fx-1">单元</div>
              <div class="dy-fx-1">车位数</div>
              <div class="position-item">车位</div>
            </div>
            <ul class="tb-content">
              <li class="content-item dy-flex" v-for="(item,index) in st" :buildingId="item.buildingId"
                :floorId="item.floorId" :unitId="item.unitId">
                <div class="dy-fx-3">{{contract.projectName}}</div>
                <div class="dy-fx-3">{{item.buildingName}}</div>
                <div class="dy-fx-1">{{item.floorNum}}</div>
                <div class="dy-fx-1">{{item.unitName}}</div>
                <div class="dy-fx-1">{{item.num}}</div>
                <div class="position-item">
                  <span class="position">
                    <b v-for="(item1,index1) in item.positions">{{item1.positionName}}<i
                        v-if="index1 + 1 !== item.positions.length">、</i></b>
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
    </div>
    <!-- 冲突账单确认 -->
    <div class="rent-resource" v-if="tzDate">
      <h3 class="he-title mb-10">冲突账单确认</h3>
      <div v-if="conflictBills.length">
        <div style="color:#ec4151">此次退租（{{tzDate}}）影响了以下账单</div>
        <div class="mb-10">注：{{tzDate}}之后的尚未收款的账单直接作废，不显示在下表</div>
        <div></div>
        <div class="unit-table">
          <div class="tb-title dy-flex border-b gradient-color">
            <div class="dy-fx-1">账单编号</div>
            <div class="dy-fx-3">退租前</div>
            <div class="dy-fx-3">退租后</div>
          </div>
          <div class="tb-content-plus">
            <ul class="dy-flex border-b" v-for="item in conflictBills">
              <li class="dy-fx-1 border-r" style="align-items: center;justify-content: center;">{{item.billNo}}
              </li>
              <li class="dy-fx-3 border-r rentClass">
                <section v-for="(single,one) in item.expenses" v-if="single.amount">
                  <div v-if="!one">
                    <div><p class="table-gray-title">账单周期</p></div>
                    <span>{{item.beginDate | formatDate}}至{{item.endDate | formatDate}}</span>
                  </div>
                  <div class="dy-flex" style="flex-direction: column;">
                    <div><p class="table-gray-title mt-10">{{single.expenseName}}</p></div>
                    <span>应收金额：{{single.amount.amountReceive || '--'}}元</span>
                    <span>已收金额：{{single.amount.amountPayed || '--'}}元
                      <span style="color:#ec4151" v-if="single.amount.amountRefund > 0">（应退：{{single.amount.amountRefund}}元）</span>
                    </span>
                    <span>减免金额：{{single.amount.derateExpense || '--'}}元</span>
                    <span>结转金额：{{single.amount.carryOverAmount || '--'}}元</span>
                  </div>
                </section>
                <section v-if="!item.expenses[0].amount" class="invalidCalss">作废</section>
              </li>
              <li class="dy-fx-3 rentClass">
                <section v-for="(single,one) in item.expenses" v-if="single.withdrawAmount">
                  <div v-if="!one">
                    <div><p class="table-gray-title">账单周期5</p></div>
                    <span class="color-orange">{{item.withdrawBeginDate | formatDate}}至{{item.withdrawEndDate | formatDate}}</span>
                  </div>
                  <div v-if="single.withdrawAmount" class="dy-flex" style="flex-direction: column;">
                    <div><p class="table-gray-title mt-10">{{single.expenseName}}</p></div>
                    <span>应收金额：{{single.withdrawAmount.amountReceive}}元</span>
                    <span>已收金额：{{single.withdrawAmount.amountPayed}}元
                      <span style="color:#ec4151" v-if="single.withdrawAmount.amountRefund > 0">（应退：{{single.withdrawAmount.amountRefund}}元）</span></span>
                    <span>减免金额：{{single.withdrawAmount.derateExpense}}元</span>
                    <span>结转金额：{{single.withdrawAmount.carryOverAmount}}元</span>
                  </div>
                </section>
                <section v-if="!item.expenses[0].withdrawAmount" class="invalidCalss">作废</section>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div style="text-align: center;" v-else>本次退租无账单需要确认</div>
    </div>



    <section class="border-b">
      <div class="title-withdraw bg-f7f7f7 mb-10" style="margin-left:-24px; margin-right:-24px; padding-left:24px;">
        <h3 class="he-title inline pr-12">应收部分</h3>
        <span class="color-primary">截止退租时间共有
          <a href="#/billList?ddtab=true" target="_blank" @click="pageName(withdraw.zlfName)"
            class="color-orange mlr-3">{{wfMoney}}个账单</a>未付清
        </span>
      </div>
      <div class="he-receivable-container">
        <!--应收部分费项-->
        <div class="mb-10" v-for="(item,index) in receiveData" :type="item.type">
          <div class="row">
            <div class="col-xs-2 line-height-34">{{item.expense_name}}：</div>
            <div class="col-xs-3 row">
              <div class="col-xs-11">
                <input type="text" class="form-control" placeholder="金额" v-model="item.amount" :value="item.amount"
                  @input="validateReceiveExpense(item.amount,index)" @blur="validateReceiveExpense2(item.amount,index)">
              </div>
              <div class="col-xs-1 line-height-34 plr-0 text-center">元</div>
            </div>
            <div class="col-xs-4">
              <input placeholder="备注(选填)" type="text" class="form-control" v-model="item.memo" :vaule="item.memo">
            </div>
            <div class="col-xs-1 pl-0">
              <span class="icon-Gm-delete font-18 cursor line-height-34 color-c9c9c9" @click="delReceiveExpense(index)"
                v-if="item.isShow">
              </span>
            </div>
          </div>
        </div>

        <!--收取费用添加框-->
        <div class="row mb-10" v-for="(item,index) in newReceiveData">
          <div class="col-xs-2 relative">
            <input type="text" class="form-control receive-name" v-model="item.expense_name" :value="item.expense_name"
              autocomplete="off" @input="matchReceiveExpense(item.expense_name,index)">
            <ul class="hi-expense-match bg-fff border z-998 line-height-34" v-show="isReceiveMatch">
              <li v-for="(item,index) in matchData" @click="selectedReceiveExpense(item.expenseName,item.type)">
                {{item.expenseName}}
              </li>
            </ul>
          </div>
          <div class="col-xs-3 row">
            <div class="col-xs-11">
              <input type="text" class="form-control receive-amount" v-model="item.amount">
            </div>
            <div class="col-xs-1 line-height-34 plr-0 text-center">元</div>
          </div>
          <div class="col-xs-4">
            <input placeholder="备注(选填)" type="text" class="form-control" v-model="item.memo">
          </div>
          <div class="col-xs-1 pl-0 ">
            <span class="hl-icon icon-Gm-cancel cursor font-18 line-height-34 mr-5"
              @click="cancelAddReceiveExpense(index)"></span>
            <span class="hl-icon icon-Gm-confirm cursor font-18 line-height-34"
              @click="addReceiveExpense(index)"></span>
          </div>
        </div>
        <div class="color-primary clearfix hr-click-container" @click="showAddReceiveExpense('RC')">
          <span class="pull-left hl-icon icon-Org-account font-18 line-height-34 pr-5"></span>
          <span class="pull-left">添加费用</span>
        </div>
        <div class="color-primary line-height-34">
          <span class="pr-12">应收合计：</span>
          <span>{{ receiveTotal }}</span>元
        </div>
      </div>
    </section>
    <section class="border-b">
      <div class="title-withdraw bg-f7f7f7 mb-10" style="margin-left:-24px; margin-right:-24px; padding-left:24px;">
        <h3 class="he-title inline pr-12">应退部分</h3>
        <span class="color-primary">截止退租时间共有
          <a href="#/billList?ddtab=true" target="_blank" @click="pageName(withdraw.zlfName)"
            class="color-orange mlr-3">{{yfMoney}}个账单</a>已付应退
        </span>
      </div>
      <div class="he-recoverable-container">
        <!--应退部分费项-->
        <div class="mb-10" v-for="(item,index) in refundData" :type="item.type">
          <div class="row mb-10">
            <!-- <div class="col-xs-2 line-height-34" v-model="item.expense_name">
              {{item.expense_name}}：
            </div> -->
            <div class="col-xs-2 line-height-34">
              {{item.expense_name}}：
            </div>
            <div class="col-xs-3 row">
              <div class="col-xs-11">
                <input type="text" class="form-control refund-amount" :value="item.amount"
                  @input="validateRefundExpense(item.amount,index)" @blur="validateRefundExpense2(item.amount,index)"
                  v-model="item.amount">
              </div>
              <div class="col-xs-1 line-height-34 plr-0 text-center">元</div>
            </div>
            <div class="col-xs-4">
              <input placeholder="备注(选填)" type="text" class="form-control" :value="item.memo" v-model="item.memo">
            </div>
            <div class="col-xs-1">
              <span class="icon-Gm-delete font-18 line-height-34 color-c9c9c9 cursor" @click="delRefundExpense(index)"
                v-if="item.isShow"></span>
            </div>
          </div>
        </div>
        <!--应退费用添加框-->
        <div class="row mb-10" v-for="(item,index) in newRefundData">
          <div class="col-xs-2 relative">
            <input type="text" class="form-control refund-name" v-model="item.expense_name" :value="item.expense_name"
              @input="matchRefundExpense(item.expense_name,index)" autocomplete="off">
            <ul class="hi-expense-match bg-fff border z-998 line-height-34" v-show="isReceiveMatch">
              <li v-for="(item,index) in matchData" @click="selectedRefundExpense(item.expenseName, item.type)">
                {{item.expenseName}}
              </li>
            </ul>
          </div>
          <!-- <div class="col-xs-2 relative" v-model="item.expense_name">
            <input type="text" class="form-control refund-name" v-model="item.expense_name" :value="item.expense_name" @input="matchRefundExpense(item.expense_name,index)" autocomplete="off">
            <ul class="hi-expense-match bg-fff border z-998 line-height-34" v-show="isReceiveMatch">
              <li v-for="(item,index) in matchData" @click="selectedRefundExpense(item.expenseName, item.type)">
                {{item.expenseName}}
              </li>
            </ul>
          </div> -->
          <div class="col-xs-3 row">
            <div class="col-xs-11">
              <input type="text" class="form-control" :value="item.amount" v-model="item.amount">
            </div>
            <div class="col-xs-1 line-height-34 plr-0 text-center">元</div>
          </div>
          <div class="col-xs-4">
            <input placeholder="备注(选填)" type="text" class="form-control" :value="item.memo" v-model="item.memo">
          </div>
          <div class="col-xs-1 pl-0 ">
            <span class="hl-icon icon-Gm-cancel cursor font-18 line-height-34 mr-5"
              @click="cancelAddRefundExpense(index)"></span>
            <span class="hl-icon icon-Gm-confirm cursor font-18 line-height-34" @click="addRefundExpense(index)"></span>
          </div>
        </div>

        <div class="clearfix color-primary hr-click-container" @click="showAddRefundExpense('RF')">
          <span class="pull-left hl-icon icon-Org-account  line-height-34 font-18 pr-5"></span>
          <span class="pull-left ">添加费用</span>
        </div>
        <div class="color-primary line-height-34">
          <span class="pr-12">应退合计：</span>
          <span>{{refundTotal}}</span>元
        </div>
      </div>
    </section>
    <section class="border-b">
      <h3 class="he-title">费用合计</h3>
      <div class="color-primary line-height-34">
        <span class="pr-12">费用合计：</span>
        <span>{{total | formatNum}}</span>
        <span>元</span>
        <span>{{totalTip}}</span>
      </div>
    </section>

    <section class="border-b">
      <h3 class="he-title">退租原因</h3>
      <ul class="he-hire-reason clearfix mb-10">
        <li v-for="(item,index) in withdrawReason" @click="selectedReason(item)"
          :class="{active:item == withdrawReasonActive}">{{item}}
        </li>
      </ul>
    </section>

    <section class="border-b">
      <h3 class="he-title">待办事项</h3>
      <ul class="he-deal-thing mb-10">
        <li class="mb-10" v-for="(item,index) in todoList">
          <span>{{index + 1}}、</span>
          <span class="pr-12">{{item}}</span>
          <span class="icon-Gm-delete color-c9c9c9 cursor" @click="delTodoItem(index)"></span>
        </li>
      </ul>
      <!-- 添加 -->
      <div class="clearfix line-height-34" v-for="(item,index) in newTodoList">
        <div class="pull-left">{{todoList? todoList.length + index + 1 : index + 1}}、</div>
        <input type="text" class="form-control pull-left he-deal-thing-ipt mr-16" :value="item"
          v-model="newTodoList[index]" autocomplete="off">
        <span class="pull-left hl-icon icon-Gm-cancel line-height-34 font-18 mr-5 cursor" @click="cancelTodoIpt(index)">
        </span>
        <span class="pull-left hl-icon icon-Gm-confirm line-height-34 font-18 cursor" @click="addTodoItem(index)">
        </span>
      </div>
      <div class="clearfix color-primary hr-click-container" @click="showTodoIpt">
        <span class="pull-left hl-icon icon-Org-account line-height-34 font-18 pr-5"></span>
        <span class="pull-left">添加</span>
      </div>
    </section>

    <section class="border-b">
      <h3 class="he-title">存档图片</h3>
      <ul class="he-image clearfix mb-10">
        <li class="active" v-for="(item,index) in pics">
          <img :src="item + '?w=180&h=136'" alt="存档图片" @click="showBigImage(index)">
          <div @click="delImage(index)">删除</div>
        </li>
        <li class="upload-image" v-show="pics.length < 5"></li>
      </ul>
      <div class="color-999">建议上传大小不超过2M的JPG或PNG格式图片，最多上传5张</div>
    </section>

    <!-- 相关文件 -->
    <section>
      <!-- icon-Nav-contract-file -->
      <h3 class="he-title">相关文件</h3>
      <div class="flexbox">
        <div style="width:92px;padding-left:5px;">文件列表：</div>
        <hl-button @on-click="uploadFile">上传文件</hl-button>
      </div>
      <ul class="fileList">
        <li v-for="(item,index) in fileList" style="margin:0 80px 10px 0">
          <span class="icon-Nav-contract-file"></span>
          <span class="fileName" @click="showFile(index)">{{item.name}}</span>
          <span class="icon-Gm-delete-2" @click="delFileItem(index)"></span>
        </li>
      </ul>
      <div class="sperate-line"></div>
    </section>

    <section class="border-b">
      <h3 class="he-title">备注</h3>
      <textarea placeholder="内容不超过500字" class="form-control mb-10" name="" id="" cols="30" rows="3"
        :value="withdraw.memo" v-model="withdraw.memo"></textarea>
      <button class="btn n-btn-primary mb-10" @click="confirmEdit">
        保存
      </button>
    </section>
  </section>
  <div class="upload-file-button"></div>
  <div class="loadprogress" v-if="progress">正在上传({{progress}})...</div>
  <web-costitem :show="flag" @query="queryExpenditure" :flowtype="flowtype" permissions="true"></web-costitem>
</section>
<script src="modules/bill/scripts/costItem.js" type="text/javascript" charset="utf-8"></script>
<script src="modules/contract/scripts/contract_public.js" charset="utf-8"></script>
<script src="modules/withdraw/scripts/withdraw_edit.js" charset="utf-8"></script>
<style>
  .loadprogress {
    position: fixed;
    z-index: 999999;
    left: 0;
    bottom: 0;
    height: 20px;
    width: 500px;
    font-size: 12px;
    text-indent: 3px;
    line-height: 20px;
  }

  .flexbox {
    display: flex;
    justify-content: space-between;
  }

  .fileName {
    margin: 0 10px;
  }

  .fileList {
    display: flex;
    flex-wrap: wrap;
  }

  .tb-content-plus li {
    min-height: 40px;
    display: flex;
    padding: 10px;
  }

  .rentClass {
    flex-direction: column;
    align-items: flex-start;
  }

  .rentClass>div {
    display: flex;
    flex-direction: column;
  }

  .rentClass>div div {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 14px;
  }

  .rentClass>div span {
    margin-bottom: 10px;
  }

  .invalidCalss {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
  }

  .table-gray-title {
    line-height: 30px;
    padding: 0 15px;
    background: rgba(240, 240, 240, 1);
    border-radius: 2px;
    display: inline-block;
    margin-bottom: 10px;
  }
</style>